<template>
  <el-container>
    <!--头部-->
    <el-header>
      <Header />
    </el-header>
    <!--主体内容-->
    <el-container>
      <!--侧边栏-->
      <el-aside width="200px">
        <Sidebar />
      </el-aside>
      <!--主体框架-->
      <el-main style="background: lightgray;">
        <!--内容联动-->
        <el-card class="box-card">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="current.path" v-if="current">{{current.name}}</el-breadcrumb-item>
          </el-breadcrumb>
        </el-card>
        <el-card class="content" shadow="hover">
          <transition name="transition" mode="out-in">
            <router-view />
          </transition>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  import Header from "@/components/Header/Header";
  import Sidebar from "@/components/Sidebar/Sidebar";
  import Home from "@/views/home/Home";
  import { mapState}  from 'vuex';
  export default {
    name: "Manage",
    components: {Home, Sidebar, Header},
    computed: {
      ...mapState({
        current: (state) => state.currentMenu,
      })
    }
  }
</script>

<style scoped>
  .transition-enter{
    opacity: 0;
  }
  .transition-enter-active{
    transition: opacity .5s;
  }
  .transition-leave{
    opacity: 1;
  }
  .transition-leave-active{
    opacity: 0;
    transition:opacity .5s;
  }

  .el-card__body,.el-main{
    padding: 0;
  }
  .content{
    margin: 10px;
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
</style>
